<bk-dialog
    :is-show.sync="rollingUpdateDialogConf.isShow"
    :width="rollingUpdateDialogConf.width"
    :title="rollingUpdateDialogConf.title"
    :close-icon="rollingUpdateDialogConf.closeIcon"
    :ext-cls="'biz-rolling-update-dialog'"
    :quick-close="false"
    @confirm="rollingUpdateConfirm"
    @cancel="hideRollingUpdate">
    <template slot="content">
        <div v-bkloading="{isLoading: rollingUpdateDialogConf.loading}" style="min-height: 455px;">
            <div class="title-wrapper">
                <div class="left">
                    <span style="margin-right: 40px;">当前版本：{{rollingUpdateDialogConf.oldVer}}</span>
                    <span>实例数：{{curInstance.instance}}</span>
                </div>
                <div class="right">
                    更新版本：
                    <div class="dropdown">
                        <bk-selector
                            :placeholder="'请选择项目'"
                            :list="rollingUpdateDialogConf.verList"
                            :selected.sync="rollingUpdateDialogConf.selectedVerId"
                            :setting-key="'id'"
                            :searchable="true"
                            :display-key="'name'"
                            :search-key="'name'"
                            @item-selected="verSelected">
                        </bk-selector>
                    </div>
                    <span>
                        实例数：
                        <bk-number-input
                            :value.sync="rollingUpdateDialogConf.instanceNum"
                            :min="1"
                            :max="1000"
                            :ex-style="{width: '80px'}"
                            :placeholder="'请输入'">
                        </bk-number-input>
                    </span>
                    <a href="javascript:void(0)" class="bk-text-button" style="margin-left: 27px;" @click="toggleVariable"
                        v-if="(rollingUpdateDialogConf.oldVariableList && rollingUpdateDialogConf.oldVariableList.length) || (rollingUpdateDialogConf.newVariableList && rollingUpdateDialogConf.newVariableList.length)"
                        >
                        <i class="bk-icon icon-edit2"></i>编辑变量
                    </a>
                    <template v-else>
                        <bk-tooltip :content="'模板未引用变量'" :delay="500" placement="top">
                            <a href="javascript:void(0)" class="bk-text-button is-disabled" style="margin-left: 27px;">
                                <i class="bk-icon icon-edit2"></i>编辑变量
                            </a>
                        </bk-tooltip>
                    </template>
                </div>
            </div>
            <div class="variable-wrapper" v-if="rollingUpdateDialogConf.isShowVariable">
                <div class="left">
                    <template v-if="rollingUpdateDialogConf.oldVariableList && rollingUpdateDialogConf.oldVariableList.length">
                        <div class="biz-key-value-wrapper">
                            <div class="biz-key-value-item" v-for="(variable, index) in rollingUpdateDialogConf.oldVariableList">
                                <input type="text" class="bk-form-input" disabled v-model="variable.key">
                                <span class="equals-sign">=</span>
                                <input type="text" maxlength="30" class="bk-form-input right" placeholder="值" disabled v-model="variable.value">
                            </div>
                        </div>
                    </template>
                </div>
                <div class="right">
                    <template v-if="rollingUpdateDialogConf.newVariableList && rollingUpdateDialogConf.newVariableList.length">
                        <div class="biz-key-value-wrapper">
                            <div class="biz-key-value-item" v-for="(variable, index) in rollingUpdateDialogConf.newVariableList">
                                <input type="text" class="bk-form-input" disabled v-model="variable.key">
                                <span class="equals-sign">=</span>
                                <input type="text" maxlength="30" class="bk-form-input right" placeholder="值" v-model="variable.value">
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="diff-wrapper">
                <bk-diff
                    v-if="rollingUpdateDialogConf.oldContent"
                    :old-content="rollingUpdateDialogConf.oldContent"
                    :new-content="rollingUpdateDialogConf.newContent"
                    :format="'side-by-side'"
                    :min-height="400"
                    :context="200">
                </bk-diff>
            </div>
        </div>
    </template>
    <template slot="footer">
        <div class="bk-dialog-outer">
            <template v-if="isUpdating">
                <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary disabled">
                    更新中...
                </button>
                <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel disabled">
                    取消
                </button>
            </template>
            <template v-else>
                <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary"
                    @click="rollingUpdateConfirm">
                    确定
                </button>
                <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel" @click="hideRollingUpdate">
                    取消
                </button>
            </template>
        </div>
    </template>
</bk-dialog>
